{% extends 'course-video.html' %}

{% block title %}
    课程评论
{% endblock %}

{% load staticfiles %}

{% block custom_css %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/base.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/common-less.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/learn-less.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/aui.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/mooc.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/common-less.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static 'css/muke/course/course-comment.css' %}">
{% endblock %}

{% block custom_bread_tail %}
    <li><a href="{% url 'course:course_list' %}">公开课程</a>></li>
    <li><a href="{% url 'course:detail' course.id %}">课程详情</a>></li>
    <li>课程评论</li>
{% endblock %}

{# 重写course-video.html中的评论区域 #}
{% block lesson_or_comment %}
    {# 标签页(章节/评论) #}
    <div class="mod-tab-menu">
        <ul class="course-menu clearfix">
            <li><a class="ui-tabs-active" id="learnOn"
                   href="{% url 'course:info' course.id %}"><span>章节</span></a></li>
            <li><a id="commentOn" class="active"
                   href="{% url 'course:comment' course.id %}"><span>评论</span></a></li>
        </ul>
    </div>
    {% if course.notice %}
        <div id="notice" class="clearfix">
            <div class="l"><strong>课程公告:</strong>
                <a href="javascript:void(0)">{{ course.notice }}</a>
            </div>
        </div>
    {% endif %}

    {# 评论 #}
    <div id="js-pub-container" class="issques clearfix js-form">
        <div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
            <textarea id="js-pl-textarea" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！"></textarea>
        </div>
        <input type="button" id="js-pl-submit" class="pub-btn" data-cid="452" value="发表评论">
        <p class="global-errortip js-global-error"></p>
    </div>
    <div id="course_note">
        <ul class="mod-post" id="comment-list">

            {% for comment in course_comments %}
                <li class="post-row">
                    <div class="media">
                        {# todo 跳转到个人页面 #}
                        <span target="_blank"><img src='{{ MEDIA_URL }}{{ comment.user.image }}' width='40'
                                                   height='40'/></span>
                    </div>
                    <div class="bd">
                        <div class="tit">
                            <span target="_blank">{{ comment.user.nickname }}</span>
                        </div>
                        <p class="cnt">{{ comment.comments }}</p>
                        <div class="footer clearfix">
                            <span title="创建时间" class="l timeago">时间：{{ comment.add_time }}</span>
                        </div>
                    </div>
                </li>
            {% endfor %}

        </ul>
    </div>
{% endblock %}

{% block custom_js %}
    <script type="text/javascript">
        //添加评论
        $('#js-pl-submit').on('click', function () {
            var comment = $("#js-pl-textarea").val();
            if (comment == "") {
                alert("评论不能为空");
                return
            }
            $.ajax({
                cache: false,
                type: "POST",
                url: "{% url 'course:add_comment' %}",
                data: {'course_id': {{ course.id }}, 'comment': comment},
                async: true,
                beforeSend: function (xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                },
                success: function (data) {
                    if (data.status == 'fail') {
                        if (data.msg == '用户未登录') {
                            window.location.href = "/login/";
                        } else {
                            alert(data.msg)
                        }
                    } else if (data.status == 'success') {
                        window.location.reload();//刷新当前页面.
                    }
                }
            });
        });
    </script>
{% endblock %}